<template>
  <div class="card-add-friend-main">
    <div class="card-add-friend-head">
      <div class="header-left">
        <div class="head-title">
          群积分
        </div>
        <img class="divider" src="@/assets/images/divider.png" />
        <div class="grid-content">
          <div class="grid-item">可托管群数：<span>100</span></div>
          <div class="grid-item">已托管：<span>2</span></div>
          <div class="grid-item">剩余：<span>98</span></div>
          <div class="grid-item font-blue" style="font-weight: 500;">
            扩容
            <el-tooltip class="item" effect="dark" placement="top">
              <div slot="content">每日达日上限后暂停接受，次日休眠<br />时段外自动恢复继续自动接受。</div>
              <svg-icon icon-class="question" />
            </el-tooltip>
          </div>
        </div>
      </div>
      <div class="header-right">
        <div class="font-blue">前往积分系统 -></div>
      </div>
    </div>
    <div class="card-add-friend-container">
      <div class="table-container">
        <div class="table-head-search">
          <div class="search-rows">
            <el-button v-hasPermi="['system:point:add']" type="primary" @click="showCheckDialog = true"><i class="el-icon-plus el-icon--left"></i>添加托管群</el-button>
            <el-autocomplete
              size="small"
              popper-class="account-list"
              v-model="state"
              :fetch-suggestions="querySearch"
              placeholder="全部企微号"
              @select="handleSelect">
              <i
                class="el-icon-arrow-down el-input__icon"
                slot="suffix"
                @click="handleIconClick">
              </i>
              <template slot-scope="{ item }">
                <span class="name">{{ item.name }}</span>
                <span class="company">{{ `@${item.company}` }}</span>
              </template>
            </el-autocomplete>
            <el-input class="search-input" size="small" placeholder="请输入群名称" suffix-icon="el-icon-search" />
            <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="创建开始日期"
            end-placeholder="创建结束日期"
            size="small" 
            style="width: 280px;"
            >
          </el-date-picker>
          </div>
          <a v-hasPermi="['system:point:export']" class="status-button">
            <span>导出数据</span>
          </a>
        </div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="selection" width="70">
          </el-table-column>
          <el-table-column prop="number" label="托管群">
            <template slot-scope="scope">
              <div class="company-account">
                <img class="account-cover" src="https://wework.qpic.cn/wwpic/177031_HhrnVYv6QQSgQ2C_1686909054/0" />
                <div class="account-info">
                  <div class="name">测试群</div>
                  <div class="groupNums">群成员 3</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="number" label="企微号">
            <template slot-scope="scope">
              <div class="company-account">
                <img class="account-cover" src="https://wework.qpic.cn/wwpic/177031_HhrnVYv6QQSgQ2C_1686909054/0" />
                <div class="account-info">
                  <div class="name">闵雨微</div>
                  <div class="desc">@志新</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="task_status" label="管理号状态">
            <template slot-scope="scope">
              <div class="task-status">
                <span class="round open" />
                <span>离线</span>
                <span style="color: rgb(255, 73, 73);">（无法统计积分）</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="option" label="添加托管时间">
            <template slot-scope="scope">
              2024-02-29 10:01
            </template>
          </el-table-column>
          <el-table-column prop="option" label="操作" width="260">
            <template slot-scope="scope">
              <el-button v-hasPermi="['system:point:changeno']" type="text" size="small" class="mr-12" @click="dialogVisible = true">更换管理号</el-button>
              <el-popconfirm
                title="确定取消托管？"
              >
                <el-button slot="reference" v-hasPermi="['system:point:trusteeship']" type="text" size="small">取消托管</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
          <template slot="empty">
            <TableEmpty />
          </template>
        </el-table>
      </div>
      <div class="card-add-friend-footer">
        <div class="space-list">
          <div class="space-item">已选：</div>
          <div class="space-item">0</div>
          <div class="space-item" style="color: #3070ff;">全选所有</div>
          <div class="space-item" style="color: #3070ff;">清空已选</div>
        </div>
        <div class="space-list">
          <el-button v-hasPermi="['system:point:trusteeship']" plain size="small">批量取消托管</el-button>
          <!-- <el-button plain size="small">批量开启任务</el-button>
          <el-button plain size="small">批量关闭任务</el-button>
          <el-button plain size="small">批量加好友设置</el-button>
          <el-button plain size="small">批量接受对象设置</el-button> -->
        </div>
      </div>
    </div>
    <ChangeOrganizeDialog :visible="dialogVisible" @handCloseDialog="onHandCloseDialog" />
    <SelectGroupDialog :visible="showCheckDialog" @onHandleClose="onHanleCheckDialogClose" />
  </div>
</template>
<script>
import ChangeOrganizeDialog from './changeOrganizeDialog.vue'
import SelectGroupDialog from './SelectGroupDialog.vue'
export default {
  data() {
    return {
      dialogVisible: false,
      showCheckDialog: false,
      options: [{
        value: 1,
        label: '未分组'
      }, {
        value: 2,
        label: '测试分组1'
      }, {
        value: 3,
        label: '测试分组2'
      }],
      tableData: [{ id: 1, name: '1111' }],
      statuses: [{
        value: 1,
        label: '开启'
      }, {
        value: 2,
        label: '关闭'
      }],
      restaurants: [],
      state: '',
      value: ''
    }
  },
  components: {
    ChangeOrganizeDialog,
    SelectGroupDialog
  },
  mounted() {
    this.restaurants = this.loadAll();
  },
  methods: {
    onHandCloseDialog() {
      this.dialogVisible = false
    },
    onNavigationTo(path) {
      this.$router.push(path)
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        { name: '闵雨微', company: '锐行' },
        { name: '肖洁', company: '锐行' },
        { name: '肖成红', company: '锐行' },
        { name: '伍丽霞', company: '锐行' },
      ];
    },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    },
    onHanleCheckDialogClose() {
      this.showCheckDialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
.card-add-friend-main {
  height: calc(100vh - 48px);
  overflow: auto;
  flex: 1 1;
  position: relative;

  .card-add-friend-head {
    height: 46px;
    background: #fff;
    border-bottom: 1px solid #e9e9e9;
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;

    .font-blue {
      color: rgb(48, 112, 255) !important;
    }

    .header-left {
      display: flex;
      align-items: center;
      justify-content: flex-start;

      .head-title {
        font-size: 14px;
        line-height: 22px;
        height: 48px;
        background: #fff;
        font-weight: 700;
        border-bottom: 1px solid #e9e9e9;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 11;
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }

      .divider {
        margin: 0 20px;
        width: 1px;
        height: 16px;
      }

      .grid-content {
        display: grid;
        column-gap: 24px;
        grid-template-columns: 108px 64px 58px 56px;

        .grid-item {
          font-size: 14px;
          font-weight: 400;
          color: rgba(0, 0, 0, .45);
          line-height: 22px;

          span {
            color: rgba(0, 0, 0, .85);
            font-weight: 600;
          }
        }
      }
    }
  }

  .card-add-friend-container {
    margin: 12px 12px 80px;
    padding: 12px;
    font-size: 14px;
    line-height: 22px;
    background: #ffffff;

    .config-tips {
      margin-bottom: 12px;
    }

    .table-container {
      .table-head-search {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;

        .search-rows {
          display: grid;
          column-gap: 8px;
          align-items: center;
          grid-template-columns: 124px 240px 200px 251px;
        }

        .status-button {
          line-height: 1.5715;
          position: relative;
          display: inline-block;
          font-weight: 400;
          white-space: nowrap;
          text-align: center;
          background-image: none;
          box-shadow: unset;
          cursor: pointer;
          transition: all .3s cubic-bezier(.645, .045, .355, 1);
          user-select: none;
          touch-action: manipulation;
          height: 32px;
          padding: 4px 15px;
          font-size: 14px;
          border-radius: 4px;
          color: rgba(0, 0, 0, .65);
          border: 1px solid #e9e9e9;
          background: #fff;

          span {
            margin-left: 8px;
          }
        }
      }

      .company-account {
        display: flex;
        align-items: center;

        .account-cover {
          width: 40px;
          height: 40px;
        }

        .account-info {
          margin-left: 8px;

          .name {
            font-size: 14px;
            line-height: 22px;
            color: #222333;
          }

          .desc {
            font-size: 12px;
            color: #f08b00;
            line-height: 22px;
          }
          .groupNums {
            font-size: 12px;
            color: #888999;
          }
        }

        .accept-account {
          font-size: 14px;
          line-height: 22px;
        }
      }

      .task-status {
        display: flex;
        align-items: center;
        font-size: 14px;
        line-height: 22px;

        .round {
          display: block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          margin-right: 4px;

          &.open {
            background: #52c41a;
          }
        }
      }
    }
  }

  .card-add-friend-footer {
    position: fixed;
    left: 226px;
    right: 0;
    bottom: 0;
    background: #ffffff;
    padding: 16px 12px;
    display: flex;
    align-content: center;
    justify-content: space-between;
    font-size: 14px;
    line-height: 22px;

    .space-list {
      display: flex;
      align-items: center;

      .space-item {
        &:not(:first-child) {
          margin-left: 8px;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.account-list {
  li {
    line-height: normal;
    padding: 7px;
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    .name {
      color: rgba(0, 0, 0, .65);
      &::before {
        display: inline-block;
        content: ' ';
        height: 6px;
        width: 6px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.25);
        vertical-align: middle;
        margin-right: 4px;
      }
    }
    .company {
      color: rgb(240, 139, 0);
      margin-left: 4px;
    }
  }
}
</style>